<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
</head>
<style>
    .bootstrap-table{position:relative;}
    .btn_add{background-color:none}
</style>
<body>
    <table id="reportTable">
    </table>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
 <script src="js/tableExport.js"></script>
<script src="js/bootstrap-table.js"></script>
 <script src="js/bootstrap-table-export.js"></script>
<script type="text/javascript">
        $(function () {
            var datareaslut = [];
            for (var i = 0; i < 100; i++) {
                num = Math.floor(Math.random() * 10);
                tlat = 108.939621 + Math.random() * 10 - 5;
                tlng = 34.343147 + Math.random() * 10 - 5;
                datareaslut.push({
                    id: i,
                    type: num % 2 == 0 ? "1" : "0",
                    position: [tlat, tlng],
                    carPi: "陕A" + Math.floor(Math.random() * 89999 + 10000),
                    owner: "张三" + Math.floor(Math.random() * 89999 + 10000),
                    colorValue: Math.floor(Math.random() * 10) % 3
                })
            }
            $('#reportTable').bootstrapTable({
                method: 'get',
                cache: false,
                height: 400,
                // striped: true,
                pagination: true,
                pageSize: 20,
                pageNumber:1,
                // search: true,
                showColumns: true,
                // clickToSelect: true,
                columns: [{
                        field: 'id',
                        title: '登录名'
                    },
                    {
                        field: 'type',
                        title: '昵称'
                    },
                    {
                        field: 'position',
                        title: '角色'
                    },
                    {
                        field: 'carPi',
                        title: '操作',
                    },
                    {
                        field: 'owner',
                        title: '操作',
                    },
                    {
                        field: 'owner',
                        title: 'colorValue',
                    },

                ],
                data :datareaslut,
                onPageChange: function (size, number) {
                    
                },
                formatNoMatches: function(){
                    return '无符合条件的记录';
                }
            });
                                
            $(window).resize(function () {
                $('#reportTable').bootstrapTable('resetView');
            });
        });
        
    </script>
</body>
</html>
